My Website

I already talked shortly about my website and what technologies I used to build it but here I will go into more detail how it's built.

Structure

The structure of my websites folder is quite similiar to what you might see in Next.js or other meta frameworks. There is a pages directory at the top level containing the images, a public directory which contains any files that should just get copied over and be provided as is and a src directory which contains components and static data. Inside the public directory there is also an images directory and the contained images get cropped to different sizes in the build script.

Build script

The build script is the heart of my website. It scans the pages directory and converts all the files that have a default JSX export to a html page in the final output folder. It also does a lot more like fetching data from steam, building the images and build the tailwind css file.

Pages

A page is really simple. At the simplest level it's a static file that has a default export of a JSX object. There is also some optional  constants I can export. First name and  second description are used to set the page name at the top right and to set the preview description.

Example of a page

A simple page might look like the code block below. Keep in mind that I have many components to stylise my website easily so I don't directly use raw headers and paragraph tags.

export const name = "Home";
export const description = "A cool description";

export default (
  <>
    <h1>Hey I'm Foxy</h1>
    <p>
      I'm a Swiss fullstack application developer in training. Thanks for
      looking at my website. There are more pages hidden away in the burger
      menu, go check them out as well!
    </p>
  </>
);

Tailwind

I have customized tailwind to use the popular catppuccin theme colors instead of it's default palette. I've also generated different brightness of the colors by using the mocha and latte variations as two anchors. Otherwise my tailwind config is stock

Blog posts

The blog posts are a rather new addition as of writing this one. They are written like the other pages but their file name is also the title of the post. In the blog post overview I added a small script to get the created and updated timestamp. It's quite fancy and allows me to just write away and not have to worry about having to update the dates etc..

Games

I use valves api to get all the games I own and get the times I've played them. You can see that when going to the games page. If you click on any game the store page of that same game opens.

Anime

I don't always update the anime page but there are a lot of the ones I like a lot. If you click on them you open their respective page.